<template>
	<navBar></navBar>
	<view class="sort_title">
		<view class="sort">
			<!-- <view class="sort_item" v-for="item in sort">
				{{item.name}}
				<uni-icons class="input-uni-icon" type="bottom" size="10" color="#999" />
			</view> -->

			<uni-collapse accordion class="fold" ref="collapse" v-model="value" @change="change">
				<uni-collapse-item class="fold_chied" style="display: float !important;" v-for="item in sort"
					:title="item.name">
					<view class="content">
						{{item.name}}
					</view>
				</uni-collapse-item>
			</uni-collapse>

		</view>
		<view class="label">
			<view class="label_item" v-for="item in labels">
				{{item}}
			</view>

		</view>
	</view>
	<view class="center">
		<view class="new_car">
			<view class="title">{{newCar.content.carBrandMarker}}</view>
			<view class="label">
				<text>{{newCar.content.type}}</text>
				<text style="background-color: #f0f0f0; color: #000;">{{newCar.content.colorLabel}}</text>
			</view>
			<view class="play">
				{{newCar.content.currentPrice}}万
				<text>指导价 -万/优惠-元</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import navBar from "../../components/navBar.vue";
	import {
		ref,
		reactive
	} from "vue";
	import {
		getNewCar,
	} from "../../ajax/ajax.js";
	import {
		onLoad,
		onReady,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const sort = reactive([{
			name: "品牌",
			data: []
		}, {
			name: "车型",
			data: []
		},
		{
			name: "价格",
			data: []
		},


	]);
	const labels = reactive(["默认排序", "最新发布", "价格最高", "价格最低"]);
	const vehicles = reactive([]);
 
	const newCar = reactive({
		content: {}
	});
	
	onLoad(() => {
		console.log('初始化时执行')
		getApp().globalData.index = 2;
	})

	onReady(() => {
		 
		getNewCar().then(res => {
			// console.log(res,res.data.data.content[0]);
			newCar.content = res.data.data.content[0];
			// console.log(newCar);
		});
	})

 

	onReachBottom(() => {
		console.log("触底了");
		 
	})
</script>

<style lang="scss">
	.sort_title {
		width: 750px;
		position: fixed;
		background-color: #fff;
		z-index: 100;

		.sort {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 750rpx;
			height: 70rpx;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}

		.label {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 750rpx;
			height: 70rpx;
			font-size: 18rpx;
			margin: 10rpx 0;

			.label_item {
				padding: 8rpx 28rpx;
				background-color: #f4f4f4;
				border-radius: 20rpx;
			}
		}
	}

	.center {
		width: 750rpx;
		margin-top: 180rpx;

		.new_car {
			width: 700rpx;
			margin: 0 auto;
			border-bottom: 1px solid #d6d6d6;
		
			.title {
				font-size: 38rpx;
				font-weight: 600;
				margin: 10rpx 0;
			}
		
			.label {
		
				text {
					font-size: 20rpx;
					padding: 6rpx 10rpx;
					background-color: #0055ff;
					margin: 0 10rpx;
					color: #fff;
					border-radius: 10rpx;
				}
			}
		
			.play {
				margin: 30rpx 0;
				font-size: 40rpx;
				font-weight: 600;
				color: red;
		
				text {
					font-size: 25rpx;
					color: #999;
					font-weight: 400;
				}
			}
		}
	}



	:deep(.uni-collapse) {
		// width: 200rem !important;
		justify-content: space-around !important;
		flex-wrap: nowrap !important;
		flex-grow: 0 !important;
		 
		flex: 1 !important;
		overflow: visible !important;
	}

	.fold {
		width: 750rpx !important;
		height: 90rpx;
		overflow: visible !important;
		display: flex !important;
		flex-wrap: nowrap;
		justify-content: center;
		margin: 0rpx 0;
	}

	.fold_chied {
		// position: relative;
		width: 750rpx !important;
		display: inline-block !important;
		width: 140rpx !important;
		overflow: visible !important;

		.content {
			flex-wrap: nowrap !important;
			width: 750rpx !important;
			overflow: visible !important;
			z-index: 10000;
			background-color: #aaffff;

		}
	}

	:deep(.uni-collapse-item__wrap-content) {
		flex-wrap: nowrap !important;
		flex-grow: 1 !important;
		width: 750rpx !important;
		height: 400rpx !important;
		position: absolute !important;
		border: 1px solid;
		top: 0rpx;
		left: 0;
		overflow: visible !important;
	}

	.uni-collapse {
		width: 100%;
		display: flex;
		flex-direction: inherit;
		background-color: #fff;
	}

	:deep(.content) {
		padding: 15px;
		overflow: visible !important;
	}

	.text {
		font-size: 14px;
		color: #666;
		line-height: 20px;
		overflow: visible !important;
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
		overflow: visible !important;
	}
</style>